<template>
  <div class="van-hairline--top open-Payment-page">
    <div class="open-Payment-page-top">
    <ul>
      <li><span>需要支付<b>￥{{payInfo.value | priceFormart}}</b></span><span>已优惠￥{{payInfo.coupon | priceFormart}}</span></li>
    </ul>
    <ol>
      <li v-show="!isPayLoading" @click="confirmFun">立即支付</li>
      <li v-show="isPayLoading" class="pay-loading">支付中...</li>
    </ol>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    show: false
  }),
  props: {
    isPayLoading: false,
    payInfo: {
      type: Object,
      default: function() {
        return {
          value: 0,
          coupon: 0
        }
      }
    }
  },
  methods: {
    vant() {
      this.show = true
    },
    // 确认支付
    confirmFun () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否确认开通？'
      }).then(() => {
        this.payClickHandler()
      }).catch(() => {})
    },
    payClickHandler() {
      this.$emit('paySubmit')
    }
  }
}
</script>
<style lang="less">
.open-Payment-page {
  background: #ffffff;
  // border-top: 1px solid #e6e6e6;
  width: 100%;
  height: 60px;
  .open-Payment-page-top {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    ul {
      flex: 1;
      padding-left: 16px;
      li {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
        b{
          font-size:20px;
          color:rgba(230,94,46,1);
        }
        span{
          margin-right: 10px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  ol {
    li {
      width:100px;
      height:40px;
      background:rgba(0,122,230,1);
      border-radius:6px;
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      text-align: center;
      margin-right: 12px;
    }
    .pay-loading {
      margin-right: 12px;
      width:100px;
      height:40px;
      background: #ddd;
      border-radius:6px;
      line-height: 40px;
      text-align: center;
      margin-right: 12px;

      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
  }
}
</style>
